<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{money}}</text>
		</view>

		<view class="pay-type-list">
			<view class="type-item">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额抵扣</text>
					<text>可用余额 ¥{{balance || 0}}</text>
				</view>
				<u-checkbox v-model="checked" shape="circle" active-color="#FA436A" size="42rpx"></u-checkbox>
			</view>
		</view>
		<text class="mix-btn" @click="payWeChat()">确认支付</text>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['userMoney'])
		},
		data() {
			return {
				order:'',
				money: 0,
				type:'',
				balance:0,
				checked:false,
			};
		},
		onLoad(options) {
			if(options.type){
				this.type = options.type;
			}
			this.money = options.money;
			this.order = options.order;
			this.finance_money();
		},
		methods: {
			finance_money(){
				this.$https.Order.finance_money('member').then(res=>{
					this.balance = res.balance;
				})
			},
			payWeChat(){
				let that = this;
				uni.showLoading({
					title: '正在支付'
				})
				this.$https.Order.pay(this.order,'wechatpay').then(res => {
					uni.hideLoading();
					uni.requestPayment({
					    provider: 'wxpay',
						timeStamp:String(res.timeStamp),
						nonceStr:res.nonceStr,
						package: res.package,
						signType:'MD5',
						paySign:res.paySign,
					    success: function (res) {
							uni.redirectTo({
								url: '/pages/Order/paySuccess?type='+that.type 
							})
					    },
					    fail: function (err) {
							console.log(err)
					        // uni.redirectTo({
					        // 	url: '/pages/Order/order?state=0'
					        // })
					    }
					});
				}).catch(fail=>{
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style lang='scss'>
	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price{
			font-size: 50upx;
		 	color: #303133;
			margin-top: 12upx;
			&:before{
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;
		
		.type-item{
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position:relative;
		}
		image{
			width: 56upx;
			height: 56upx;
			margin-right: 30upx;
		}
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: 32upx;
			color:  #303133;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24upx;
			color: #909399;
		}
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: 32upx;
		color: #fff;
		background-color: $uni-color-primary;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px $uni-color-primary;
	}

</style>
